<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的信息</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background-color: #3498db; color: white; text-align: center; padding: 20px; }
        .nav { background-color: #2980b9; overflow: hidden; }
        .nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
        .nav a:hover { background-color: #1abc9c; }
        .footer { background-color: #34495e; color: white; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; }
        
        .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 20px 0; padding: 20px; }
        .card h2 { color: #3498db; margin-top: 0; }
        .card-item { padding: 10px; margin: 10px 0; }
        .card-item a { color: #2980b9; text-decoration: none; font-weight: bold; }
        .card-item a:hover { text-decoration: underline; }
        
        .columns { display: flex; flex-wrap: wrap; gap: 20px; }
        .column { flex: 1; min-width: 280px; }
  
        .my-love-link {display: inline-flex;align-items: center;gap: 8px;
            background-color: #3498db;color: white;padding: 10px 16px;border-radius: 4px;text-decoration: none;transition: background-color 0.3s;}
        .my-love-link:hover {background-color: #2980b9;text-decoration: none;}
        .my-love-link i {color: #e74c3c;}
    </style>
</head>
<body>
    <div class="header">
        <h1>我的信息</h1>
    </div>
    
    <div class="nav">
        <a href="petList">图鉴</a>
        <a href="home">攻略</a>
        <a href="myInfo">我的</a>
    </div>
    
    <div class="container">
        <div class="card">
            <h2>个人资料</h2>
            <c:if test="${sessionScope.user != null}">
                <div class="card-item">
                    <p><strong>用户名:</strong> ${sessionScope.user.username}</p>
                </div>
                <div class="card-item">
                    <p><strong>账号:</strong> ${sessionScope.user.account}</p>
                </div>
                <div class="card-item">
                    <p><strong>联系方式:</strong> ${sessionScope.user.contact}</p>
                </div>
                        <a href="${pageContext.request.contextPath}/editInfo" class="my-love-link">
            <i class="fas fa-edit"></i> 修改个人信息
        </a>
                <!-- 修改后的我的收藏链接 -->
                <a href="${pageContext.request.contextPath}/myLoves" class="my-love-link">
                    <i class="fas fa-heart"></i>
                    我的收藏
                </a>
            </c:if>
            <c:if test="${sessionScope.user == null}">
                <div class="card-item">
                    <p>您是游客登录，暂无个人信息。</p>
                    <a href="login">登录</a> 或 <a href="register">注册</a> 以查看个人信息
                </div>
            </c:if>
        </div>
    </div>
</body>
</html>